<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" style="background-color:#f5f5f5;" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Icons-->
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
   
<!-- ztree -->
<link rel="stylesheet" th:href="@{/asserts/vendors/ztree/css/metroStyle/metroStyle.css}" type="text/css">

<script type="text/javascript" th:src="@{/asserts/vendors/jquery/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/jquery.form/jquery.form.min.js}"></script>

<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.exedit.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/jquery.form.autofill/jquery.formautofill.js}"></script>

<!-- menus -->
<script th:src="@{/asserts/vendors/layer/layer.js}"></script>

<!-- 根路径 -->
<script type="text/javascript" th:inline="javascript">
    ctx = /*[[@{/}]]*/ '';
</script>

<SCRIPT type="text/javascript">

	function zTreeOnClick(event, treeId, treeNode) {
		if(treeNode.resourceParent == 0){
			layer.msg("顶级父类不能编辑.") ; 
			return ; 
		}
		$("input[name=id]").val("") ;
		$.get(ctx+ "boot/platform/menus/detailJson?id="+treeNode.id , function(response){
			if(response.code == 200){
				$("form[id=resourceLinkUpdateForm]").autofill(response.data);
			}
		},"json") ;
		
	};

	function updateResourceLink(){
		var _id = $("input[name=id]").val() ;
		var _resourceLink = $("input[name=resourceLink]").val() ;
		var _resourceIcon = $("input[name=resourceIcon]").val() ;
		var _resourceOrder =$("input[name=resourceOrder]").val() ;

		$.post("/handle/role/resource/updateResourceLink.do" , {
				id:_id ,
				resourceLink:_resourceLink ,
				resourceOrder:_resourceOrder ,
				resourceIcon:_resourceIcon} , function(response){
			var data = JSON.parse(response);
			layer.msg(data.desc) ;
		}) ;
	}

	function beforeDrag(treeId, treeNodes) {
		for (var i = 0, l = treeNodes.length; i < l; i++) {
			if (treeNodes[i].drag === false) {
				return false;
			}
		}
		return true;
	}
	function beforeDrop(treeId, treeNodes, targetNode, moveType) {
		return targetNode ? targetNode.drop !== false : true;
	}

	function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
		var treeNode = treeNodes[0];
		var _resourceParent = treeNode.resourceParent; //父类
		var _applicationId = $("input[name=applicationId]").val();
		var _resourceName = treeNode.resourceName;
		var _id = treeNode.id;
		
		console.log("id:"+_id+",resourceName:"+_resourceName+",applicationId:"+_applicationId+",resourceParent:"+_resourceParent) ;
		$.get(ctx+"boot/platform/menus/updateResourceParent?id="+_id+"&resourceParent="+_resourceParent , function(response){
			console.log("response:"+response) ;
			if(response.code != 200){
				layer.msg("更新失败.") ;
			}else{
				var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
				treeObj.reAsyncChildNodes(null, "refresh");
			}
		} , "json") ; 
	};

	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var nodes = treeObj.getNodes();
		for (var i = 0; i < nodes.length; i++) { //设置节点展开
			treeObj.expandNode(nodes[i], true, true , true);
		}
	}

	function filter(treeId, parentNode, childNodes) {
		if (!childNodes)
			return null;
		for (var i = 0, l = childNodes.length; i < l; i++) {
			childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
		}
		return childNodes;
	}
	function beforeRemove(treeId, treeNode) {
		layer.confirm('请确认是否删除？', {
			btn : [ '确认', '关闭' ]
		//按钮
		}, function() {
			var id = treeNode.id;
			$.get(ctx + "boot/platform/menus/delete?id=" + id, function(response) {
				if (response.code == 200) {
					layer.msg('删除成功.') ;
					var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
					treeObj.reAsyncChildNodes(null, "refresh");
				} else {
					layer.msg("删除失败");
				}
			},"json");
		}, function() {
			console.log("关闭");
		});
		return false ;
	}
	function beforeRename(treeId, treeNode, newName) {
		if (newName.length == 0) {
			setTimeout(function() {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.cancelEditName();
				alert("节点名称不能为空.");
			}, 0);
			return false;
		}
		return true;
	}

	var newCount = 1;
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0){
			return;
		}
		var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='add node' onfocus='this.blur();'></span>";
		sObj.after(addStr);
		var btn = $("#addBtn_" + treeNode.tId);
		if (btn)
			btn.bind("click", function() {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				console.log('treeNode = ' + treeNode.id);
				
				zTree.addNodes(treeNode, {
					id : (100 + newCount),
					pId : treeNode.id,
					name : "new node" + (newCount++)
				});
				return false;
			});
	};

	//修改名称后提交服务器
	function zTreeOnRename(event, treeId, treeNode, isCancel) {
		var _resourceParent = treeNode.resourceParent; //父类
		var _applicationId = $("input[name=applicationId]").val();
		var _resourceName = treeNode.resourceName;
		var _id = treeNode.id;
		updateResource(_resourceParent, _applicationId, _resourceName, _id);
	}

	function updateResource(_resourceParent, _applicationId, _resourceName, _id) {
		$.post(ctx+ "boot/platform/menus/editResource.do", {
			resourceParent : _resourceParent,
			applicationId : _applicationId,
			resourceName : _resourceName,
			id : _id
		}, function(response) {
			console.log("response = " + response);
		});
	}

	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_" + treeNode.tId).unbind().remove();
	};

	$(document).ready(function() {
		var applicationId = $("input[name=applicationId]").val() ; 
		console.log("applicationId = " + applicationId) ; 
		var setting = {
			async : {
				enable : true,
				url: ctx+"boot/platform/application/menusData?applicationId="+applicationId
			},
			view : {
				expandSpeed : "",
				addHoverDom : addHoverDom,
				removeHoverDom : removeHoverDom,
				selectedMulti : false
			},
			edit : {
				enable : true , 
				showRenameBtn: false
			},
			data : {
				simpleData : {
					enable : true,
					idKey : "id",
					pIdKey : "resourceParent",
					rootPId : 0
				},
				key : {
					name : "resourceName"
				}
			},
			callback : {
				beforeRemove : beforeRemove,
				beforeDrag : beforeDrag,
				beforeDrop : beforeDrop,
				onDrop : zTreeOnDrop,
				onClick : zTreeOnClick ,
				onAsyncSuccess : zTreeOnAsyncSuccess
			}
		};
		var treeObj = $.fn.zTree.init($("#treeDemo"), setting);
		treeObj.expandAll(true);
		
		var h = $(document).height() - 40 ; 
		$("div.tree-card").css("height" , h) ; 
	});
</SCRIPT>

</HEAD>

<BODY class="training-frame-body">

	<div class="content_wrap">
		<input type="hidden" name="id" />
		<input type="hidden" th:value="${param.id}" name="applicationId" />
		<input type="hidden" name="resourceParent"  />
					
		<div class="panel col-lg-12 col-sm-12 tree-card" style="float: left;overflow-x: hidden; overflow-y: scroll;">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
		
	</div>
	
	<script type="text/javascript">

		// 修改
		function save(){
			console.log('save');
			$("form#resourceLinkUpdateForm").ajaxSubmit({
				url : ctx+"boot/platform/menus/update",
				type : "POST",
				headers : {
					'Content-Type' : 'application/x-www-form-urlencoded' 
				},
				success : function(data) {
					if (data.code == 200) {
						layer.msg("操作成功!");
						var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
						treeObj.reAsyncChildNodes(null, "refresh");
					} else {
						layer.alert(data.message);
					}
				}
			});	
		}
		
		function showApplication(){
			var index = layer.open({
				type : 2,
				title : false , //'菜单管理',
				closeBtn:0 ,
				shadeClose : true,
				shade : 0.8,
				area : [ '100%', '100%' ],
				content : ctx+'boot/platform/application/select' , 
				btn: ['确认', '取消'] , 
				yes: function(index, layero){
					console.log("index = " + index + " layero = " + layero) ; 
					var selectResourceParentNode = $(layero).find("iframe")[0].contentWindow.document.getElementById("selectResourceParentNode")
					
					var resourceName = $(selectResourceParentNode).attr("data-applicationName") ; 	
					var id = $(selectResourceParentNode).attr("data-id") ; 	
					
					console.log("applicationId = " + id + " , applicationIdLabel = " + resourceName) ;
					
					$("input[name=applicationIdLabel]").val(resourceName) ; 
					$("input[name=applicationId]").val(id) ; 
					
					layer.close(index) ; 
			 	}
			});		
		}
		
		function showResourceParent(){
			var index = layer.open({
				type : 2,
				title : false , //'菜单管理',
				closeBtn:0 ,
				shadeClose : true,
				shade : 0.8,
				area : [ '100%', '100%' ],
				content : ctx+'boot/platform/menus/parents?id=1' , 
				btn: ['确认', '取消'] , 
				yes: function(index, layero){
					console.log("index = " + index + " layero = " + layero) ; 
					var selectResourceParentNode = $(layero).find("iframe")[0].contentWindow.document.getElementById("selectResourceParentNode")
					
					var resourceName = $(selectResourceParentNode).attr("data-resourceName") ; 	
					var id = $(selectResourceParentNode).attr("data-id") ; 	
					
					console.log("selectResourceId = " + id + " , selectResourceName = " + resourceName) ;
					
					$("input[name=resourceParentLabel]").val(resourceName) ; 
					$("input[name=resourceParent]").val(id) ; 
					
					layer.close(index) ; 
			 	}
			});		
		}
		
		function showIcons(){
			var index = layer.open({
			type : 2,
			title : false , //'菜单管理',
			closeBtn:0 ,
			shadeClose : true,
			shade : 0.8,
			area : [ '100%', '100%' ],
			content : ctx+'pages/boot/platform/application/icons?id=1' , 
			btn: ['确认', '取消'] , 
			yes: function(index, layero){
				
				console.log("index = " + index + " layero = " + layero) ; 
				var selectResourceParentNode = $(layero).find("iframe")[0].contentWindow.document.getElementById("selectResourceParentNode")
				
				var resourceName = $(selectResourceParentNode).attr("data-name") ; 	
				var id = $(selectResourceParentNode).attr("data-id") ; 	
				
				console.log("selectResourceId = " + id + " , selectResourceName = " + resourceName) ;
				
				$("span#resourceIconLabel").html('<i class="'+resourceName+'" aria-hidden="true"></i>') ; 
				$("input#resourceIcon").val(id) ; 
				
				layer.close(index) ; 
				
			 }	
		   }) ; 
		} 	
	</script>
</BODY>
</HTML>